<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
			list-style: none;
		}

		.zhengfang {
			width: 200px;
			height: 200px;
			background-color: #0f0;
		}

		.xian {
			height: 0.5px;
			background-color: #ccc;
		}

		.yuan {
			width: 200px;
			height: 200px;
			background-color: #0f0;
			border-radius: 50%;
		}

		.sanjiao {
			width: 0;
			height: 0;
			border: 100px solid transparent;
			border-left-color: red;
		}

		.box {
			/* display: flex;
			flex-direction: row;
			flex-wrap: wrap; */

			font-size: 0;
		}


		.box img {
			width: 200px;
			/* float: left; */


			/* display: block; */
			/* float: left; */
		}

		.mengceng {
			width: 240px;
			height: 220px;
			background-color: #0f0;
			position: relative;
		}

		.mengceng>div {
			width: 240px;
			height: 220px;
			background-color: #ccc;
			position: absolute;
			top: 0;
			left: 0;
			opacity: .3;
			display: none;
		}

		.mengceng:hover>div {
			display: block;
		}

		.a,
		.b,
		.c {
			width: 200px;
			height: 200px;
			background-color: #0f0;
		}

		.b {
			background-color: #f00;
			/* display: none; */
			/* visibility: hidden; */
			opacity: .5;
		}

		.zi {
			width: 50px;
			height: 50px;
			background-color: #ccc;
			/* display: block; */
			/* visibility: visible; */
			opacity: .5;
		}

		.c {
			background-color: #00f;
		}

		.box1 {}

		.box1:hover {
			background-color: #0f0;
			width: 200px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.box2 {
			width: 300px;
			background-color: #0f0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}


		/* 上边框塌陷 */
		.a1 {
			width: 300px;
			height: 300px;
			background-color: #ccc;
			/* padding-top: 50px; */
			/* overflow: hidden; */
			border-top: .5px solid #ccc;
		}

		.a2 {
			width: 100px;
			height: 100px;
			background-color: #f00;
			margin-top: 50px;
		}

		ul li {
			width: 500px;
			height: 50px;
			background-color: #0f0;
			border: 1px solid #ccc;
			margin: 20px 0;
		}

		ul li:nth-of-type(3) {
			margin-top: 50px;
		}

		.b1 {
			width: 500px;
			height: 500px;
			background-color: #0f0;
			/* display: flex;
			justify-content: center;
			align-items: center; */
			position: relative;
		}

		.b2 {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/* position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto; */

			position: absolute;
			/* top: calc(50% - 100px);
			left: calc(50% - 100px); */
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}




		/* 图片留白
		1.独占一行  
		给父设：display: flex
		给子设：display:block    float: left;  
		2.一行多张图片 
		给父级设 font-size:0  display: flex;    
		给子设：float: left;
		*/
	</style>
</head>

<body>
	<!-- 
	1.三角形 圆 正方形 线（画一条0.5px的直线：height:0.5px;）
	https://blog.csdn.net/m0_60237095/article/details/130076471

	2.图片留白
	https://blog.csdn.net/DarlingYL/article/details/131309405

	3.蒙层

	4.超出文本显示...
	https://blog.csdn.net/weixin_48046344/article/details/132979770
	
	5.margin上下重叠问题

	6.盒子绝对居中（自身宽高已知和自身宽高未知）
	给父盒子设flex
	position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
	position: absolute;top: calc(50% - 100px);left: calc(50% - 100px);

	7.满屏的品

	8.href与src的区别？
	1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
	2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
	3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。
-->

	<!-- <div>
		<div class="zhengfang"></div>
		<div class="xian"></div>
		<div class="yuan"></div>
		<div class="sanjiao"></div>
	</div>

	<div class="box">
		<img src="./安琪拉.jpg" alt="">
		<img src="./安琪拉.jpg" alt="">
		<img src="./安琪拉.jpg" alt="">
		<img src="./安琪拉.jpg" alt="">
		<img src="./安琪拉.jpg" alt="">
		<img src="./安琪拉.jpg" alt="">
		<p style="clear: both;"></p>
	</div> -->

	<!-- <div class="a"></div>
	<div class="b">
		<div class="zi"></div>
	</div>
	<div class="c"></div> -->

	<div class="mengceng">
		<img src="./file-1683537103-0.jpg" alt="" width="240" height="220">
		<div></div>
	</div>

	<div class="box1">
		润吉“声音”2025巡回演唱会-南京站【情人节专场】
	</div>

	<div class="box2">
		润吉“声音”2025巡回演唱会-南京站【情人节专场】
		润吉“声音”2025巡回演唱会-南京站【情人节专场】
		润吉“声音”2025巡回演唱会-南京站【情人节专场】
	</div>

	<div class="a1">
		<div class="a2"></div>
	</div>

	<!-- <ul>
		<li>11</li>
		<li>22</li>
		<li>33</li>
		<li>44</li>
		<li>55</li>
		<li>66</li>
		<li>77</li>
	</ul> -->

	<div class="b1">
		<div class="b2"></div>
	</div>





	<div style="height: 200px;"></div>


</body>

</html>